<template>
  <div class="box">
    <header>
      <div class="left">
        <van-image
          width="80"
          height="80"
          round
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <span @click="token||$router.push('/login')">{{
          token ? userInfo.nickname : "请登录"
        }}</span>
      </div>
      <div class="right">
        <span class="header-round"> > </span>
      </div>
    </header>

    <van-grid :border="false" :column-num="3" clickable>
      <van-grid-item @click="dingdan">
        <van-icon name="orders-o" />
        <span>我的订单</span>
      </van-grid-item>
      <van-grid-item>
        <van-icon name="after-sale" />
        <span>优惠券</span>
      </van-grid-item>
      <van-grid-item>
        <van-icon name="point-gift-o" />
        <span>礼品卡</span>
      </van-grid-item>
      <van-grid-item @click="shoucangShow=true">
        <van-icon name="star-o" />
        <span>我的收藏</span>
      </van-grid-item>
      <van-grid-item>
        <van-icon name="underway-o" />
        <span>我的足迹</span>
      </van-grid-item>
      <van-grid-item>
        <van-icon name="vip-card-o" />
        <span>会员福利</span>
      </van-grid-item>

      <van-grid-item @click="isShowAddr">
        <van-icon name="location-o" />
        <span>地址管理</span>
      </van-grid-item>

      <van-grid-item>
        <van-icon name="friends-o" />
        <span>账号安全</span>
      </van-grid-item>

      <van-grid-item>
        <van-icon name="service-o" />
        <span>联系客服</span>
      </van-grid-item>

      <van-grid-item>
        <van-icon name="upgrade" />
        <span>帮助中心</span>
      </van-grid-item>

      <van-grid-item>
        <van-icon name="records" />
        <span>意见反馈</span>
      </van-grid-item>
    </van-grid>

    <!-- 退出登录按钮 -->
    <!-- v-if="user" -->
    <!--  -->
    <van-cell
      v-if="token"
      title="退出登录"
      class="login-out"
      clickable
      @click="onLogout"
    />

    <!-- 展示订单 -->
    <dingdan v-if="isShowDD" @HIDE="isShowDD=$event"></dingdan>
    <!-- 我的收藏 -->
    <shoucang @hideshoucang="shoucangShow=$event" v-if="shoucangShow"></shoucang>

<!-- 地址管理 -->
      <addr @SendOff="showHandler" v-if="isShowAddrOff"></addr>
  </div>
</template>

<script>
// SendOff
import { mapState } from "vuex";
import { getItem } from "@/utils/localStorage.js";
import dingdan from "./components/dingdan.vue"
import shoucang from "./components/shoucang.vue"

import addr from "./components/addr/addr.vue"

export default {
  name: "MyIndex",
  data() {
    return {
      isShowDD: false,//控制订单显示隐藏
      shoucangShow:false,//控制收藏的显示隐藏
      userInfo: getItem("USERINFOMESSAGE"),
      isShowAddrOff:false
    };
  },
  computed: {
    ...mapState(["token"]), //这种方式修改 属性 会实时更新
  },
  components:{
    dingdan,
    shoucang,
    addr
  },
  methods: {
    showHandler($event){
        this.isShowAddrOff = $event; 
    },
    onLogout() {
      this.$dialog
        .confirm({
          title: "确定退出登录吗?",
        })
        .then(() => {
          console.log("点击了退出登录!");
          // 1.清除token
          this.$store.commit("removeUserToken");
          // 2.清除用户信息;
          this.$store.commit("setUserInfo", null);
        })
        .catch(() => {
          console.log("取消了");
        });
      console.log(this.userInfo);
    },
// 订单模块
    dingdan() {
      if (this.token) {
        //如果已经登录 则显示页面
        this.isShowDD = true;
      } else {
        //没有登录 则 跳转到登录页面;
        this.$router.push("/login");
      }
    },
    isShowAddr(){
      this.isShowAddrOff = true;
     console.log(1);
    }
  },
};
</script>

<style lang="scss" scoped>
html {
  background-color: rgb(49, 45, 45);
}
header {
  display: flex;
  padding: 0 40px;
  height: 300px;
  background-color: rgb(49, 45, 45);
  .left {
    display: flex;
    flex: 1;
    align-items: center;
    font-size: 30px;
    color: #fff;
    span {
      padding-left: 20px;
    }
  }
  .right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex: 1;
    span {
      width: 70px;
      height: 70px;
      font-size: 40px;
      background-color: #eee;
      color: #333;
      text-align: center;
      line-height: 70px;
      border-radius: 50%;
    }
  }
}
::v-deep .van-grid-item__content {
  span {
    font-size: 26px;
  }
}
::v-deep .van-grid-item {
  border-bottom: 1px solid #eee;
  border-right: 1px solid #eee;
  background-color: #fff;
}
::v-deep .van-grid-item__content--center {
  padding: 50px 0 !important;
}
.box {
  background-color: rgb(245, 247, 249);
}
::v-deep .van-cell__title {
  text-align: center;
}
::v-deep .login-out {
  // background-color: #eee;
  position: absolute;
  bottom: 100px;
  z-index: 10;
  border: 1px solid #eee;
}
::v-deep .van-grid {
  height: calc(100% - 300px);
}
</style>
